<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>画板</title>
  <meta charset="UTF-8">
  <script src="/static/bflow/assets/js/scriptLib.js"></script>
  <!-- highlight --->
  <link rel="stylesheet" href="/static/bflow/assets/components/gojs/extensions/highlight.css">
  <script src="/static/bflow/assets/components/gojs/extensions/highlight.js"></script>
  <link rel="stylesheet" href="/static/bflow/assets/components/gojs/css/main.css">
  <!-- GoJS -->
  <script src="/static/bflow/assets/components/gojs/go.js"></script>
  <script src="/static/bflow/assets/components/gojs/goUtil.js"></script>
  <script src="/static/bflow/assets/components/gojs/extensions/BalloonLink.js"></script>
  <script>
      function init() {
          var $ = go.GraphObject.make;  // for conciseness in defining templates

          // api : https://gojs.net/beta/api/symbols/Diagram.html
          myDiagram =
                  $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
                          {
                              // start everything in the middle of the viewport
                              initialContentAlignment: go.Spot.Center,
//                              fixedBounds: new go.Rect(0, 0, 500, 500),  // document is always 600x500 units
                              allowHorizontalScroll: false,  // disallow scrolling or panning
                              allowVerticalScroll: false,
                              allowZoom: false,              // disallow zooming
                              allowClipboard: false,
                              allowCopy: false,
                              allowDrop: false,
                              allowDelete: false,
                              allowLink: false,
                              allowTextEdit: true, //可编辑（总开关）
                              allowMove: true, //允许移动
                              "toolManager.hoverDelay": 200,
                              // have mouse wheel events zoom in and out instead of scroll up and down
                              "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
                              // enable undo & redo
                              "undoManager.isEnabled": false, //撤回功能
                              "ModelChanged": function(e) {     // just for demonstration purposes,
                                  if (e.isTransactionFinished) {  // show the model data in the page's TextArea
                                      document.getElementById("mySavedModel").value = e.model.toJson();
                                  }
                              }
                          });

          initDiagram(myDiagram, false);


          loadData();
      }

      // Show the diagram's model in JSON format
      function save() {
          document.getElementById("mySavedModel").value = myDiagram.model.toJson();
      }

      function loadData() {
         var jsonData = {
              "nodeKeyProperty": "id",
              "nodeDataArray": [
                  { "id": "start", "loc": "-125 243", "text": "开始", "category":"Start", "color": "lightgreen", },
                  { "id": "assign", "loc": "5 227", "text": "分派\n(王五)", "color": "#fea200", "tip":"分派时间：09-17 10:23\n备注：认真点"},
                  { "id": "valid", "loc": "218 225", "text": "验证\n(李四)", "tip":"验证时间：09-18 11:23\n备注：没毛病"},
                  { "id": "audit", "loc": "432 228", "text": "审批", "tip":"审批时间：09-18 10:23\n备注：此订单没问题"},
                  { "id": "over", "loc": "461 435", "text": "结束", "category":"End" }
              ],
              "linkDataArray": [
                  { "from": "start", "to": "assign", "text": "提交人\n(张三)", "lineColor": "lightgreen"},
                  { "from": "assign", "to": "valid", "text": "处理人\n(李四)" }, //  弯曲, "curviness": 80
                  { "from": "valid", "to": "audit", "text": "验证通过", },
                  { "from": "valid", "to": "over", "text": "验证失败" },
                  { "from": "audit", "to": "valid", "text": "重新验证" },
                  { "from": "audit", "to": "over", "text": "审批通过" },
              ]
          }
          myDiagram.model = go.Model.fromJson(jsonData);
          document.getElementById("mySavedModel").value = JSON.stringify(jsonData);
      }
  </script>
</head>
<body onload="init()">
<div id="sample" class="col-sm-5 col-sm-offset-3">
    <div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 400px"></div>

    <div>
        <div>
            <button id="SaveButton" onclick="save()">Save</button>
            <button onclick="load()">Load</button>
            Diagram Model saved in JSON format:
        </div>
    <textarea id="mySavedModel" style="width:100%;height:300px">

    </textarea>
    </div>
</div>
</body>
</html>
